
<template>
  <div class="app-container">
    <search-header
      v-show="boo.showSearch"
      :select-prop="selectProp"
      @search-action="searchAction"
    ></search-header>
    <div class="app-permission-container flex-between mb8">
      <span class="page-list-title">活动列表</span>
    </div>
    <div class="app-table-container">
      <el-table
        v-loading="boo.loading"
        :data="list" border header-row-class-name="app-table-list"
      >
        <el-table-column
          label="活动编号"
          align="center"
          key="activityCode"
          prop="activityCode"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="活动类型"
          align="center"
          key="activityTypeId"
          prop="activityTypeId"
          :show-overflow-tooltip="true"> 
          <template slot-scope="{row}">
            {{row.activityTypeId | numToStr(dictsList, 'activityType')}}
          </template>
        </el-table-column>
        <el-table-column
          label="服务信息"
          align="center"
          :show-overflow-tooltip="true"
          width="120"> 
          <template slot-scope="{row}">
            {{row.packageContent || '/'}}
          </template>
        </el-table-column>
        <el-table-column
          label="发布数量"
          align="center"
          key="number"
          prop="number"
          width="120"
        />
        <el-table-column
          label="单价(元)"
          align="center"
          key="price"
          prop="price"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="服务费(元)"
          align="center"
          key="serviceFee"
          prop="serviceFee"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="发布商家"
          align="center"
          key="price1"
          prop="price1"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="活动时间"
          align="center"
          :show-overflow-tooltip="true"
        >         
          <template slot-scope="{row}">
            {{ row.startingTime }} <br/>
            {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="成交数量"
          align="center"
          key="transactionQuantity"
          prop="transactionQuantity"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="分享数量"
          align="center"
          key="shareQuantity"
          prop="shareQuantity"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          align="center"
          key="activityStatus"
          prop="activityStatus"
          :show-overflow-tooltip="true"> 
          <template slot-scope="{row}">
            {{row.activityStatus | numToStr(dictsList, 'activityStatus')}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="jumpPage('detailActive',{id: row.id}, {})"
              >活动详情</el-button
            >
            <el-button
              size="mini" v-hasPermi="['agent:avtive:detail']"
              type="text" v-if="row.activityStatus != '0' && hasH5(row)"
              @click="jumpPage('ActiveData',{}, {id: row.id})"
              >数据</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="other.total > 0"
        :total="other.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <active-dialog ref="active-dialog" @submit="submit"/>
  </div>
</template>

<script>
import {
  getActivityList, delActivity
} from "@/api/activeManage/active";
export default {
  name: "AgentActiveList",
  components: {
    "search-header": () => import("@/rhComponents/searchHeader/index"),
    "active-dialog": () => import("@/views/activeManage/active-config/active-dialog.vue"),
  },
  filters: {
    numToStr(num, list, type){
      let index = list.findIndex(item => item.deptType == type)
      if(index == -1) return '未定义参数'
      let idx = list[index].child.findIndex(i => `${i.dictValue}` == num)
      if(idx == -1) return '---'
      return list[index].child[idx].dictLabel
    }
  },
  data() {
    return {
      selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
      boo: {
        loading: false, // 遮罩层
        multiple: true, // 非多个禁用
        showSearch: true, // 显示搜索条件
        showActiveDialog: false, // 显示活动编辑、新增弹框
      },
      other: {
        ids: [], // 选中数组
        total: 0, //总条数
      },
      dictsList: [],
      // 地块列表
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogActive: {
        title: '自营商品编辑',
        currentItem: {},
      }
    };
  },
  mounted(){
    let _self = this
    _self.initGetDicts().then(res => {
      _self.getList()
      console.log(_self.dictsList, 9999)
    })
  },
  methods: {
    // 判断当前活动类型是否只支持h5配置
    hasH5(row){
      let {activityTypeId} = row, boo = false
      if(activityTypeId == '2' || activityTypeId == '3' || activityTypeId == '4'){
        boo = true
      }
      return boo
    },
    jumpPage(name, query = {}, params = {}){
      let _self = this
      _self.$router.push({name, params, query})
    },
    // 搜索条件查询
    searchAction(prop) {
      this.queryParams = Object.assign(this.queryParams, prop["params"]);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询用户列表 */
    getList() {
      this.boo.loading = true;
      getActivityList(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.other.total = response.total;
          this.boo.loading = false;
        })
        .catch(() => {});
    },
    /** 删除按钮操作 */
    deleteRow(row) {
      let landId;
      if (row) {
        landId = [row.landId];
      } else {
        landId = this.other.ids;
      }
      this.$modal
        .confirm('是否确认删除？')
        .then(function () {
          return delActivity(landId);
        })
        .then(() => {
          this.queryParams.pageNum = 1
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    showDialog(ref, actions, row) {
      let _self = this;
      let vm = _self.$refs['active-dialog']
      vm.showDialog(ref, actions, row)
    },
    submit(type) {
      let _self = this;
      if(type == 'add'){
        _self.queryParams.pageNum = 1
      }
      _self.getList()
    },
  }
};
</script>
<style scoped lang="scss">
.form-content{
  .form-title{
    margin-bottom: vh(20);
    line-height: vh(34);
    font-size: vh(16);
    color: #0003AA;
  }
  .num-form-content ::v-deep{
    .num-desc-txt{
      font-size: 13px;
      color: #3D3D3D;
    }
    .num-form{
      width: vw(200);
      margin: 0 vw(20);
    }
    .num-btn{
      padding: vh(8) 0;
      width: vw(80);
      cursor: pointer;
      background: rgba(128, 193, 250, 0.4);
      border-radius: vh(6);
      margin-left: vw(20);
      .btn-txt{
        font-size: 13px;
        color: #0003AA;
      }
    }
  }
}
</style>